<script lang="ts" setup>
/* 加载所有svg图标 */
const modules: any = import.meta.glob('@/assets/svg/*.svg', { eager: true })
const list = ref<string[]>([])
for (const path in modules) {
  list.value.push(path.replace('/src/assets/svg/', '').replace('.svg', ''))
}
const icon = ref<string>('')
const emit = defineEmits(['getValue'])

const { value } = defineProps({
  value: {
    type: String,
    default: ''
  }
})

watch(
  () => value,
  (val) => {
    icon.value = val
  },
  {
    immediate: true
  }
)
</script>

<template>
  <el-form-item class="min-w-52" label="图标">
    <el-select
      v-model="icon"
      class="w-full"
      placeholder="请选择图标"
      @change="emit('getValue', icon)"
    >
      <el-container class="flex-wrap max-w-60 gap-2 p-3">
        <el-option
          v-for="p in list"
          :key="p"
          :value="p"
          class="flex items-center justify-center max-w-9"
        >
          <SvgIcon :name="p" svg-class="!size-7" />
        </el-option>
      </el-container>
    </el-select>
  </el-form-item>
</template>

<style lang="scss" scoped></style>
